* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body, #root {
    width: 100%;
    height: 100%;
    font-size: 16px;
    background: #eef0f3;
}

li, a {
    list-style: none;
    text-decoration: none;
    color: black;
}

html, body, #root {
    width: max-content !important;
    height: max-content !important;
    min-width: 100% !important;
    min-height: 100% !important;
}


.box {
    display: grid;
    grid-template-columns: repeat(13, 80px);
    grid-template-rows: repeat(4, 80px);
    place-content: center;
    gap: 8px;

    & div {
        background: #e07c70;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: white;
    }
}

.c10_12 {
    grid-column: 10/12;
}

.c12_14 {
    grid-column: 12/14;
}

.r1_3 {
    grid-row: 1/3;
}

.c1_3 {
    grid-column: 1/3;
}

.c6_9r2_4 {
    grid-column: 6/9;
    grid-row: 2/4;
}

.r3_5 {
    grid-row: 3/5;
}